<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
		<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/layui/layui.js"></script>
	<script type="text/javascript">
		/* 注册layui */
		layui.use('layer', function () {
			var layer = layui.layer;
		});

		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
			});
		});

		$(function(){
			new Vue({
				el: "#app",
				data: {
					orders: [],
					statusNo:"",
					current:"1",
					page:"",

					orderCount:{
						all:"",
						waitPay:"",
						waitSend:"",
						waitReceive:"",
						waitWrite:"",
					},
					user:{}

				},
				methods:{
					goPage(){
						let current = this.current;
						let statusNo = this.statusNo;
						console.log(current+"----"+statusNo);
						axios.get("http://192.168.6.125:8080/order/pageList",{
							params: {
								current: current,
								statusNo:statusNo,
								size:"4",
								userId:this.user.id
							},
							timeout: 1000,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}

						}).then(response=> {
							if (response.data.code==200) {
								this.orders=response.data.data.list;
								console.log(response.data.data.list)
								this.page=response.data.data.pages;
								this.current=response.data.data.pageNum;
								console.log(this.current)
							}else{
								alert("错误:"+response.data.msg);
							}
						})

					},
					before(){
						this.current--;
						this.goPage();
					},
					after(){
						this.current++;
						this.goPage();
					},
					pages(current){
						this.current = current;
						this.goPage();
					},
					getAll(){
						this.statusNo="";
						this.goPage();
					},
					waitPay(){
						this.statusNo="1";
						this.current="1";
						this.goPage();
					},
					waitSend(){
						this.statusNo="2";
						this.current="1";
						this.goPage();
					},
					waitReceive(){
						this.statusNo='3';
						this.current="1";
						this.goPage();
					},
					waitWrite(){
						this.statusNo="4";
						this.current="1";
						this.goPage();
					},
					remind(){
						layer.alert("已提醒买家发货!",{
							shade: 0,
							fixed: true,
							offset: '300px',


								})
					},
					cancelOrder(orderId){

						layer.confirm('您确定要取消吗？', {
							shade: 0,
							fixed: true,
							offset: '300px',
							btn: ['确认','取消'] //按钮
						}, ()=>{
							//确认取消
							axios.get("http://192.168.6.125:8080/order/cancel/"+orderId).then(response=> {
								if (response.data.code==200) {
									layer.msg("已取消")
									axios.get("http://192.168.6.125:8080/order/getCount",this.user).then(response=> {
										if (response.data.code==200) {
											this.orderCount=response.data.data;
										}else{
											alert("错误:"+response.data.msg);
										}
									})
									this.goPage();
								}else{
									alert("错误:"+response.data.msg);
								}
							})
						}, function(){
							//取消
						});
					},
					confirm(orderId){
						layer.confirm('是否确认收货？', {
							shade: 0,
							fixed: true,
							offset: '300px',
							btn: ['确认','取消'] //按钮
						}, ()=>{
							//确认取消
							axios.get("http://192.168.6.125:8080/order/confirm/"+orderId).then(response=> {
								if (response.data.code==200) {
									layer.msg("已确认收货!")
									axios.get("http://192.168.6.125:8080/order/getCount",this.user).then(response=> {
										if (response.data.code==200) {
											this.orderCount=response.data.data;
										}else{
											alert("错误:"+response.data.msg);
										}
									})
									this.goPage();
								}else{
									alert("错误:"+response.data.msg);
								}
							})
						}, function(){
							//取消
						});
					},
					del(id){

						layer.confirm('是否删除订单？', {
							shade: 0,
							fixed: true,
							offset: '300px',
							btn: ['确认','取消'] //按钮
						}, ()=>{
							//确认取消
							axios.get("http://192.168.6.125:8080/order/del/"+id).then(response=> {
								if (response.data.code==200) {

									axios.get("http://192.168.6.125:8080/order/getCount",this.user).then(response=> {
										if (response.data.code==200) {
											this.orderCount=response.data.data;
										}else{
											alert("错误:"+response.data.msg);
										}
									})

									this.goPage();

									layer.msg("删除成功!")
								}else{
									alert("错误:"+response.data.msg);
								}
							})
						}, function(){
							//取消
						});

					}
				},
				mounted: function () {
					this.user = JSON.parse(localStorage.getItem("userz"));

					axios.get("http://192.168.6.125:8080/order/pageList",{
						params: {
							current: "1",
							statusNo: '',
							size:"4",
							userId:this.user.id
						},
						timeout: 1000,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					}).then(response=> {
						if (response.data.code==200) {
							this.orders=response.data.data.list;
							this.page=response.data.data.pages;
							this.current=response.data.data.pageNum;
							console.log(this.orders)
						}else{
							alert("错误:"+response.data.msg);
						}
					})
					axios.post("http://192.168.6.125:8080/order/getCount",this.user).then(response=> {
						if (response.data.code==200) {
							this.orderCount=response.data.data;
						}else{
							alert("错误:"+response.data.msg);
						}
					})
				}
			});
		})
	</script>

</head>
<body class="bgf5">
<div class="user-content__box clearfix bgf" id="app">
					<div class="title">订单中心-我的订单</div>
					<div class="order-list__box bgf">
						<div class="order-panel">
							<ul class="nav user-nav__title" role="tablist">
								<li role="presentation" class="nav-item active"><a href="#all"  @click="getAll" aria-controls="all" role="tab" data-toggle="tab">所有订单</a></li>
								<li role="presentation" class="nav-item "><a href="#pay"  @click="waitPay" aria-controls="pay" role="tab" data-toggle="tab">待付款 <span class="cr">{{orderCount.waitPay}}</span></a></li>
								<li role="presentation" class="nav-item "><a href="#emit"  @click="waitSend"   aria-controls="emit" role="tab" data-toggle="tab">待发货 <span class="cr">{{orderCount.waitSend}}</span></a></li>
								<li role="presentation" class="nav-item "><a href="#take"  @click="waitReceive"  aria-controls="take" role="tab" data-toggle="tab">待收货 <span class="cr">{{orderCount.waitReceive}}</span></a></li>
								<li role="presentation" class="nav-item "><a href="#eval" @click="waitWrite"  aria-controls="eval" role="tab" data-toggle="tab">待评价 <span class="cr">{{orderCount.waitWrite}}</span></a></li>
							</ul>

							<div class="tab-content">
								<div role="tabpanel" class="tab-pane fade in active" id="all">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th></th>
											<th></th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<tbody  v-for="(order,index) in orders">
										<tr class="order-item" v-if="order.status=='1'"  >
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">等待付款</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right">订单详情</a>
											</td>
											<td class="order">
												<div class="del" @click="del(order.id)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
												<a href="udai_shopcart_pay.html" class="but but-primary">立即付款</a>
												<!-- <a href="" class="but but-link">评价</a> -->
												<a  class="but c3"  href="javascript:void(0)" @click="cancelOrder(order.id)">取消订单</a>
											</td>
										</tr>

										<tr class="order-item" v-if="order.status=='7'"  >
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">已取消</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<div class="del" @click="del(order.id)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
											</td>
										</tr>





										<tr class="order-item" v-if="order.status=='3'|| order.status=='2'" >
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
													{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">等待收货</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<a :href="'uorder_receipted.html?id='+order.id" class="but but-primary">确认收货</a>
												<!-- <a href="" class="but but-link">评价</a> -->
												<a href="udai_apply_return.html" class="but c3">退款/退货</a>
											</td>
										</tr>
										<tr class="order-item" v-if="order.status=='4'">
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">交易成功</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<div class="del" @click="del(order.id)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
												<a href="" class="but but-link">评价</a>
											</td>
										</tr>

										</tbody>
									</table>
									<div class="page text-right clearfix" style="margin-top: 40px">

										<a class="disabled" v-if="current<2" >上一页</a>
										<a  href="javascript:void(0)" @click="before" v-if="current>1" >上一页</a>
										<div v-for="count in page" style="display: inline-block">
										<a class="select" v-if="current==count">{{count}}</a>
										<a href="javascript:void(0)" @click="pages(count)" v-if="current!==count">{{count}}</a>
										</div>
										<a class="disabled" v-if="current>=page" >下一页</a>
										<a  href="javascript:void(0)" @click="after" v-if="current < page" >下一页</a>
									</div>
								</div>

								<!--	代付款-->
								<div role="tabpanel" class="tab-pane fade" id="pay">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th></th>
											<th></th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>

										<tr class="order-item" v-for="(order,index) in orders">
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">等待付款</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<div class="del" @click="del(order.id)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
												<a href="udai_shopcart_pay.html" class="but but-primary">立即付款</a>
												<!-- <a href="" class="but but-link">评价</a> -->
												<a  href="javascript:void(0)" @click="cancelOrder(order.id)" class="but c3">取消订单</a>
											</td>
										</tr>
										<tr class="order-empty"><td colspan='6' v-if="orders.length<1">
											<div class="empty-msg">最近没有任何订单，家里好像缺了点什么！<br><a href="item_category.html">要不瞧瞧去？</a></div>
										</td></tr>
									</table>
									<div class="page text-right clearfix" style="margin-top: 40px">

										<a class="disabled" v-if="current<2" >上一页</a>
										<a  href="javascript:void(0)" @click="before" v-if="current>1" >上一页</a>
										<div v-for="count in page" style="display: inline-block">
											<a class="select" v-if="current==count">{{count}}</a>
											<a href="javascript:void(0)" @click="pages(count)" v-if="current!==count">{{count}}</a>
										</div>
										<a class="disabled" v-if="current>=page" >下一页</a>
										<a  href="javascript:void(0)" @click="after" v-if="current < page" >下一页</a>
									</div>
								</div>

								<!--	待发货-->
								<div role="tabpanel" class="tab-pane fade" id="emit">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th></th>
											<th></th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<tr class="order-item" v-for="(order,index) in orders">
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">等待发货</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<a href="javascript:void(0)" @click="remind" class="but but-primary">提醒发货</a>
												<a href="javascript:void(0)" class="but c3">退款/退货</a>
											</td>
										</tr>
										<tr class="order-empty"><td colspan='6' v-if="orders.length<1">
											<div class="empty-msg">最近没有任何订单，家里好像缺了点什么！<br><a href="item_category.html">要不瞧瞧去？</a></div>
										</td></tr>
									</table>
									<div class="page text-right clearfix" style="margin-top: 40px">

										<a class="disabled" v-if="current<2" >上一页</a>
										<a  href="javascript:void(0)" @click="before" v-if="current>1" >上一页</a>
										<div v-for="count in page" style="display: inline-block">
											<a class="select" v-if="current==count">{{count}}</a>
											<a href="javascript:void(0)" @click="pages(count)" v-if="current!==count">{{count}}</a>
										</div>
										<a class="disabled" v-if="current>=page" >下一页</a>
										<a  href="javascript:void(0)" @click="after" v-if="current < page" >下一页</a>
									</div>
								</div>

								<!--	待收货-->
								<div role="tabpanel" class="tab-pane fade" id="take">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th></th>
											<th></th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<tr class="order-item" v-for="(order,index) in orders">
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">等待付款</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<a :href="'uorder_receipted.html?id='+order.id" class="but but-primary">确认收货</a>
												<a href="udai_apply_return.html" class="but c3">退款/退货</a>
											</td>
										</tr>
										<tr class="order-empty"><td colspan='6' v-if="orders.length<1">
											<div class="empty-msg">最近没有任何订单，家里好像缺了点什么！<br><a href="item_category.html">要不瞧瞧去？</a></div>
										</td></tr>
									</table>
									<div class="page text-right clearfix" style="margin-top: 40px">

										<a class="disabled" v-if="current<2" >上一页</a>
										<a  href="javascript:void(0)" @click="before" v-if="current>1" >上一页</a>
										<div v-for="count in page" style="display: inline-block">
											<a class="select" v-if="current==count">{{count}}</a>
											<a href="javascript:void(0)" @click="pages(count)" v-if="current!==count">{{count}}</a>
										</div>
										<a class="disabled" v-if="current>=page" >下一页</a>
										<a  href="javascript:void(0)" @click="after" v-if="current < page" >下一页</a>
									</div>
								</div>
								<!--待评论-->
								<div role="tabpanel" class="tab-pane fade" id="eval">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th></th>
											<th></th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<tr class="order-item"  v-for="(order,index) in orders">
											<td>
												<label>
													<a :href="'uorder_detail.html?id='+order.id" target="right" class="num">
														{{order.createDate}} 订单号: {{order.orderNo}}
													</a>
													<div class="card" v-for="(items,i) in order.orderitems" v-if=" i<1 ">
														<div class="img"><img :src="items.goodsinfo.coverPath" alt="" class="cover"></div>
														<div class="name ep2">{{items.name}}</div>
														<div class="format">颜色分类：深棕色  尺码：{{items.goodsinfo.stock}}</div>
														<div class="favour">使用优惠券：优惠¥2.00</div>
													</div>
												</label>
											</td>
											<td></td>
											<td></td>
											<td>￥{{order.payMoney}}<br><span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
											<td class="state">
												<a class="but c6">交易成功</a>
												<a :href="'uorder_detail.html?id='+order.id" target="right" class="but c9">订单详情</a>
											</td>
											<td class="order">
												<div class="del" @click="del(order.id)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></div>
												<a href="" class="but but-link">评价</a>
											</td>
										</tr>

										<tr class="order-empty"><td colspan='6' v-if="orders.length<1">
											<div class="empty-msg">最近没有任何订单，家里好像缺了点什么！<br><a href="item_category.html">要不瞧瞧去？</a></div>
										</td></tr>



									</table>
									<div class="page text-right clearfix" style="margin-top: 40px">

										<a class="disabled" v-if="current<2" >上一页</a>
										<a  href="javascript:void(0)" @click="before" v-if="current>1" >上一页</a>
										<div v-for="count in page" style="display: inline-block">
											<a class="select" v-if="current==count">{{count}}</a>
											<a href="javascript:void(0)" @click="pages(count)" v-if="current!==count">{{count}}</a>
										</div>
										<a class="disabled" v-if="current>=page" >下一页</a>
										<a  href="javascript:void(0)" @click="after" v-if="current < page" >下一页</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
</body>
</html>